<template>
	<view>
		<view class="appoint-title">
			仅支持未来7天内的预约服务
		</view>
		<view class="appoint-month">
			<view class="appoint-border"></view>
			<view class="appoint-month-text">{{currentMonth+'月'}}</view>
			<view class="appoint-border"></view>
		</view>
		<view class="appoint-month-contain">
			<block v-for="(item,index) in monthArray" :key="index">
			<view  @click="setAppointDate(index)" class="appoint-month-contain-item">
				<view class="appoint-month-contain-item-week">
					{{item.week}}
				</view>
				<view :style="{color:index==0&&currentIndex!==index?'#2A7DFA':''}" class="appoint-month-contain-item-date" :class="currentIndex===index?'appoint-active':''">
					{{item.date}}
				</view>
			</view>
			</block>
		</view>
		<view class="appoint-time">
			<view class="appoint-time-title">
				上午
			</view>
			<view class="appoint-time-contain">
				<block v-for="(item,index) in morningTime" :key="index">
					<view @click="toTelConsult(item)"  :style="{borderBottom:(index+1<morningTime.length)?'1rpx solid #EBEBEB':'none'}" class="appoint-time-contain-item">
							{{item}}
					</view>
				</block>
			</view>
			<view class="appoint-time-title">
				下午
			</view>
			<view class="appoint-time-contain">
				<block v-for="(item,index) in afterTime" :key="index">
					<view @click="toTelConsult(item)"  :style="{borderBottom:(index+1<afterTime.length)?'1rpx solid #EBEBEB':'none'}" class="appoint-time-contain-item">
							{{item}}
					</view>
				</block>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentMonth:'',
				minCurrentMonth:'',
				currentWeek:'',
				currentDate:'',
				currentIndex:null,
				expertId:'',
				monthArray:[
					{week:'',date:''},
					{week:'',date:''},
					{week:'',date:''},
					{week:'',date:''},
					{week:'',date:''},
					{week:'',date:''},
					{week:'',date:''}
				],
				morningTime:[
					"8:00","9:00","10:00","11:00"
				],
				afterTime:[
					"13:00","14:00","15:00","16:00","17:00"
				]
			}
		},
		methods: {
			//判断当前月有几天
			getTotalDate(month){
				if(month==1||month==3||month==5||month==7||month==8||month==10||month==12){
					return 31
				}else{
					return 30
				}
			},
			setAppointDate(index){
				this.currentIndex = index;
			},
			//数字转换
			
			Arabia_To_SimplifiedChinese(Num) {
			    for (var i = Num.length - 1; i >= 0; i--) {
			        Num = Num.replace(",", "")//替换Num中的“,”
			        Num = Num.replace(" ", "")//替换Num中的空格
			    }    
			    if (isNaN(Num)) { //验证输入的字符是否为数字
			        //alert("请检查小写金额是否正确");
			        return;
			    }
			    //字符处理完毕后开始转换，采用前后两部分分别转换
			    var part = String(Num).split(".");
			    var newchar = "";
			    //小数点前进行转化
			    for (var i = part[0].length - 1; i >= 0; i--) {
			        if (part[0].length > 10) {
			            //alert("位数过大，无法计算");
			            return "";
			        }//若数量超过拾亿单位，提示
			        var tmpnewchar = ""
			        var perchar = part[0].charAt(i);
			        switch (perchar) {
			            case "0":  tmpnewchar = "零" + tmpnewchar;break;
			            case "1": tmpnewchar = "一" + tmpnewchar; break;
			            case "2": tmpnewchar = "二" + tmpnewchar; break;
			            case "3": tmpnewchar = "三" + tmpnewchar; break;
			            case "4": tmpnewchar = "四" + tmpnewchar; break;
			            case "5": tmpnewchar = "五" + tmpnewchar; break;
			            case "6": tmpnewchar = "六" + tmpnewchar; break;
			            case "7": tmpnewchar = "七" + tmpnewchar; break;
			            case "8": tmpnewchar = "八" + tmpnewchar; break;
			            case "9": tmpnewchar = "九" + tmpnewchar; break;
			        }
			        switch (part[0].length - i - 1) {
			            case 0: tmpnewchar = tmpnewchar; break;
			            case 1: if (perchar != 0) tmpnewchar = tmpnewchar + "十"; break;
			            case 2: if (perchar != 0) tmpnewchar = tmpnewchar + "百"; break;
			            case 3: if (perchar != 0) tmpnewchar = tmpnewchar + "千"; break;
			            case 4: tmpnewchar = tmpnewchar + "万"; break;
			            case 5: if (perchar != 0) tmpnewchar = tmpnewchar + "十"; break;
			            case 6: if (perchar != 0) tmpnewchar = tmpnewchar + "百"; break;
			            case 7: if (perchar != 0) tmpnewchar = tmpnewchar + "千"; break;
			            case 8: tmpnewchar = tmpnewchar + "亿"; break;
			            case 9: tmpnewchar = tmpnewchar + "十"; break;
			        }
			        newchar = tmpnewchar + newchar;
			    }   
			    //替换所有无用汉字，直到没有此类无用的数字为止
			    while (newchar.search("零零") != -1 || newchar.search("零亿") != -1 || newchar.search("亿万") != -1 || newchar.search("零万") != -1) {
			        newchar = newchar.replace("零亿", "亿");
			        newchar = newchar.replace("亿万", "亿");
			        newchar = newchar.replace("零万", "万");
			        newchar = newchar.replace("零零", "零");      
			    }
			    //替换以“一十”开头的，为“十”
			    if (newchar.indexOf("一十") == 0) {
			        newchar = newchar.substr(1);
			    }
			    //替换以“零”结尾的，为“”
			    if (newchar.lastIndexOf("零") == newchar.length - 1) {
			        newchar = newchar.substr(0, newchar.length - 1);
			    }
			    return newchar;
				},
				toTelConsult(time){
					if(this.currentIndex===null){
						uni.showToast({
						    title: '请选择日期',
						    duration: 1000,
							icon:'none'
						});
						return
					}
					let week = this.monthArray[this.currentIndex].week;
					let date = this.monthArray[this.currentIndex].date;
					uni.navigateTo({
						url:`/pagesA/tel-consult/tel-consult?linkUserId=${this.linkUserId}&month=${this.minCurrentMonth}&date=${date}&week=${week}&time=${time}&expertId=${this.expertId}`
					})
				}
		},
		onLoad(option) {
			this.expertId = option.expertId;
			this.linkUserId = option.linkUserId;
			this.currentMonth = new Date().getMonth()+1;
			this.minCurrentMonth = this.currentMonth;
			this.currentMonth=this.Arabia_To_SimplifiedChinese(this.currentMonth);
			this.currentWeek = new Date().getDay();
			this.currentDate = new Date().getDate();
			let monthTotalDay = this.getTotalDate(this.currentMonth);
			for(let i=0;i<7;i++){
				if(this.currentWeek-0+i>7){
					this.monthArray[i].week = this.currentWeek-0+i-7;
				}else{
					this.monthArray[i].week = this.currentWeek-0+i
				}
				this.monthArray[i].week=this.Arabia_To_SimplifiedChinese(this.monthArray[i].week)
				if(this.currentDate-0+i>monthTotalDay){
					this.monthArray[i].date = this.currentDate-0+i-monthTotalDay
				}else{
					this.monthArray[i].date = this.currentDate-0+i
				}
				// this.monthArray[i].date=this.Arabia_To_SimplifiedChinese(this.monthArray[i].date)
			}
		}
	}
</script>

<style scoped>
	.appoint-title{
		font-size:26upx;
		font-family:PingFangSC-Regular,PingFang SC;
		font-weight:400;
		color:rgba(168,168,168,1);
		text-align: center;
		margin: 26upx 30upx;
	}
	.appoint-month{
		display: flex;
		align-items: center;
		padding: 0 30upx;
	}
	.appoint-border{
		/* height: 1upx; */
		height: 2upx;
		border-top: 1upx solid #EBEBEB;
		width: 259upx;
	}
	.appoint-month-text{
		font-size:34upx;
		font-family:PingFangSC-Regular,PingFang SC;
		font-weight:400;
		color:rgba(51,51,51,1);
		margin:0 51upx
	}
	.appoint-month-contain{
		display: flex;
		padding: 0 30upx;
		justify-content: space-between;
		font-size:28upx;
		margin-top: 18upx;
		margin-bottom: 24upx;
		font-family:PingFangSC-Regular,PingFang SC;
		font-weight:400;
		color:rgba(85,85,85,1);
	}
	.appoint-month-contain-item{
		display: flex;
		/* justify-content: center; */
		flex-direction: column;
		align-items: center;
	}
	.appoint-active{
		background:rgba(42,125,250,1);
		padding: 0upx 9upx;
		color:rgba(255,255,255,1);
	}
	.appoint-time-title{
		width: 100%;
		background:rgba(245,246,249,1);
		padding: 26upx 46upx;
		font-size:24upx;
		font-family:PingFangSC-Regular,PingFang SC;
		font-weight:400;
		color:rgba(164,164,164,1);
	}
	.appoint-time-contain-item{
		height: 80upx;
		line-height: 80upx;
		text-align: center;
		margin:0 30upx
	}
	.appoint-time-contain-item-con{
		/* border-bottom: ; */
	}
</style>
